// webpack的生成模式下的打包配置

const {resolve} = require('path'); // path模块是Node内置的
// 导入ESLint插件
const ESLintPlugin = require('eslint-webpack-plugin');
// 引入打包html的配置
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 引入css独立打包插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 引入css压缩插件
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//  引入js压缩插件
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
    // Entry  入口
    entry: "./src/main.js",

    // Output 出口/输出 
    output: {
        path: resolve(__dirname, '../dist'), // 打包文件所在的根目录
        filename: 'js/bundle-[contenthash:8].js', // 打包生成的js文件名(可以带目录)
        clean: true, // 打包时, 会先自动清空打包文件夹
        // 设置引入打包文件的基础路径，默认是相对路径
        publicPath: '/'
    },    
    // Loader 加载器(配置loader) 
    module:{
        rules:[ // 配置加载规则 [] 表示里面可以多个规则，每个规则是一个对象
            // css文件的打包配置
            {
                test: /\.css$/, // 匹配文件名是.css结尾的
                use:[
                    MiniCssExtractPlugin.loader,
                    //"style-loader", // 将 CSS 生成 style 标签插入 HTML 中
                    "css-loader"    // 将 CSS 转为 CommonJS 的模块
                ]
            },
            // less文件打包配置
            {
                test: /\.less$/, // 处理less文件
                use: [
                    MiniCssExtractPlugin.loader,
                    //'style-loader', // 将 CSS 生成 style 标签插入 HTML 中
                    'css-loader',   // 将 CSS 转为 CommonJS 的模块
                    'less-loader'   // 将Less编译为CSS
                ]
            },
            //配置 babel 的 loader
            {
                test: /\.js$/,
                exclude: /node_modules/, // 不进行处理的文件夹
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage', // 只打包使用的ES6新API的实现代码
                                corejs: { version: 2 } // 指定core-js的版本号为2
                            }
                            ]
                        ], 
                        plugins: [], // 指定babel插件包,没有插件可去除
                    }
                }
            }, 
            // 处理图片
            {
                test: /\.(jpg|png|gif)$/,
                type: "asset",
                // 解析器
                parser: {
                    // 指定进行图片base64编码最大文件大小
                    dataUrlCondition: {
                        maxSize: 5 * 1024, // 5kb    默认8k
                    }
                },
                // 打包生成的文件
                generator: {
                    filename: 'img/[hash:8][ext]',
                },
            },
            // 配置 html 的 loader
            {
                test: /\.(html)$/,
                use: {
                loader: 'html-loader'
                }
            },
            // 打包字体图标
            {
                test: /\.(eot|svg|woff|woff2|ttf)$/,  
                type: 'asset',
                // 解析器
                parser: {
                  // 指定进行base64编码最大文件大小
                  dataUrlCondition: {
                    maxSize: 3 * 1024, // 3kb
                  }
                },
                generator: {
                   filename: 'fonts/[hash:8][ext]',
                },
            },
        ]
    },

    // Plugin 插件
    // 配置进行ESlint检查的插件\
    plugins: [
        new ESLintPlugin(),
        // 2. 配置打包HTML的插件
        new HtmlWebpackPlugin({
                template: "./public/index.html",// 指定html模板文件。
                inject: "body",// 将打包生成的JS文件放置在body尾部
                hash: true,// 在引入JS时增加hash后缀字符串,去除缓存。
                minify: {
                removeAttributeQuotes: false,// 移除属性中的双引号
                removeComments: true,// 移除注释
                collapseWhitespace: false,// 去除空格与换行
            }
        }),
        // 3. 配置插件
        new MiniCssExtractPlugin({					
            filename: "css/[hash:8].css",
        }),
    ],

    // 2. 在优化配置中指定插件来压缩
    optimization: { 
        minimizer: [
            new CssMinimizerPlugin(),  // 压缩css
            new TerserPlugin()  // 压缩js
        ],
    },

    // Mode	  模式
    mode: 'production', // 生产模式
    //mode: 'development',  // 开发模式
}